<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">客户</BreadcrumbItem>
                <BreadcrumbItem href="#">客户管理</BreadcrumbItem>
                <BreadcrumbItem href="#">修改客户</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <div class="layout-content">
                <div class="layout-contnet-main">
                    <div class="header-title">
                        <span style="font-size:16px;color:#2d8cf0;">代理商信息</span>
                    </div>
                    <p class="edit-info">
                        <span class="edit-left">公司名称</span>
                        <span>{{mess.org_name}}</span>
                    </p>
                    <p class="edit-info">
                        <span class="edit-left">营业执照注册号</span>
                        <span>{{mess.business_license_num}}</span>
                    </p>
                    <p class="edit-info">
                        <span class="edit-left">营业执照图片</span>
                        <span class="edit-img">
                            <img :src="'http://api.c.topeffects.cn/c/data/upload/license/'+mess.business_license_img_url"></img>
                        </span>
                    </p>
                    <p class="edit-info">
                        <span class="edit-left">公司地址</span>
                        <span>{{mess.user_address}}</span>
                    </p>
                </div>
            </div>
            <div class="bottom-title">
                <span style="font-size:16px;color:#2d8cf0;">联系人信息</span>
            </div>
            <Row>
                <Col span="12">
                <Form :label-width="100" :model="mess" :rules="messRule" ref="mess">
                    <FormItem label="联系人姓名" prop="user_name">
                        <Input placeholder="联系人姓名" :value="mess.user_name" v-model="mess.user_name"></Input>
                    </FormItem>
                    <FormItem label="手机号码" prop="user_phone">
                        <Input placeholder="手机号码" :value="mess.user_phone" v-model="mess.user_phone"></Input>
                    </FormItem>
                    <FormItem label="QQ号码" prop="user_qq">
                        <Input placeholder="QQ号码" :value="mess.user_qq" v-model="mess.user_qq"></Input>
                    </FormItem>
                </Form>
                <Button type="primary" size="large" style="margin-left:100px;" @click="handleSubmit('mess')">保存</Button>
                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
export default {
  data() {
    const phoneNumCheck = (rule, value, callback) => {
      var phonereg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (value === '') {
        callback(new Error('请输入您的手机号码'));
      } else if (!phonereg.test(value)) {
        callback(new Error('您输入的手机格式有误，请确认为11位的数字！'));
      } else {
        callback();
      }
    };
    const QQNumCheck = (rule, value, callback) => {
      var QQreg = /^[1-9]\d{4,13}$/;
      if (value === '') {
        callback(new Error('请输入您的QQ密码'));
      } else if (!QQreg.test(value)) {
        callback(new Error('请确认您输入的QQ号码正确'));
      } else {
        callback();
      }
    };
    return {
      mess: {
        org_name: '',
        business_license_num: '',
        business_license_img_url: '',
        user_address: '',
        user_name: '',
        user_phone: '',
        user_qq: ''
      },
      messRule: {
        user_name: [
          {
            required: true,
            message: '请输入联系人名称',
            trigger: 'blur'
          }
        ],
        user_phone: [
          {
            required: true,
            validator: phoneNumCheck,
            trigger: 'blur'
          }
        ],
        user_qq: [
          {
            required: true,
            validator: QQNumCheck,
            trigger: 'blur'
          }
        ]
      }
    };
  },
  mounted() {
    let id = this.$route.params.id;
    this._loadData(id);
  },
  methods: {
    _loadData(id) {
      let vm = this;
      let params = {
        type: 'get',
        url: 'member/getOne?',
        params: {
          id: this.$route.params.id
        },
        sCallback(data) {
          vm.mess = data.data.data;
        },
        eCallback(e) {
          console.log(e);
        }
      };
      this.http.request(params);
    },
    postData() {
      let vm = this;
      let params = {
        type: 'post',
        url: 'member/edit',
        params: {
          id: vm.mess.user_id,
          name: vm.mess.user_name,
          phone: vm.mess.user_phone,
          qq: vm.mess.user_qq
        },
        sCallback(data) {
          vm.$Message.success('提交成功!');
        },
        eCallback(e) {
          vm.$Message.error(e.data);
        }
      };
      vm.http.request(params);
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.postData();
          this.$router.push({
            path: '/home/client'
          });
        } else {
          this.$Message.error('请确认你输入的信息准确无误之后在提交!');
        }
      });
    }
  }
};
</script>
<style lang="stylus">
.edit-info
    margin-bottom 10px
    vertical-align top
    font-size 12px

.edit-left
    display inline-block
    text-align right
    width 90px
    margin-right 20px
    vertical-align top
    font-weight bold

.edit-img
    display inline-block
    width 143px
    height 200px
    border 1px solid #e4dede

.edit-img img
    width 100%
    height 100%

.edit-mess
    font-size 14px
    color #666
    margin 20px 0 20px 20px
    border-bottom 1px dashed #666

.bottom-title, .header-title
    font-size 16px
    margin 0 10px 10px

.bottom-title
    margin-top 30px
</style>
